// console.log(d3)
const dms = {
    width: 1000,
    height: 500,
    margin: {
        top: 50,
        left: 100,
        right: 100,
        bottom: 50
    }
}
dms.contentWidth = dms.width - dms.margin.left - dms.margin.right;
dms.contentHeight = dms.height - dms.margin.top - dms.margin.bottom;

const box = d3.select('#canvas').append('svg')
    .attr('id', 'box')
    .attr('width', dms.width)
    .attr('height', dms.height)

const content = box.append('g')
    .attr('id', 'content')
    .attr('transform', `translate(${dms.margin.left},${dms.margin.top})`);


const dotArea = content.append('g')
    .attr('id', 'dot-area')

// .attr('transform', `translate(40,-20)`);

d3.json('sh_day.json')
    .then(drawChart);

function drawChart(dataset) {
    const yesGet = d => d.yes;
    const noGet = d => d.no;
    const dateGet = d => d.date;
    const fangGet = d => d.fang;
    const yiGet = d => d.yi;

    // 确证人数比例尺
    const yesScale = d3.scaleLinear()
        .domain(d3.extent(dataset, yesGet))
        .range([0, dms.contentWidth])
        .nice();

    // 无症状人数比例尺
    const noScale = d3.scaleLinear()
        .domain(d3.extent(dataset, noGet))
        .range([dms.contentHeight, 0])
        .nice();


    // x 轴
    const xAxisGen = d3.axisBottom()
        .scale(yesScale)

    const xAxis = content.append('g')
        .attr('id', 'x-axis')
        .style('transform', `translate(0px,${dms.contentHeight}px)`);
    xAxis.call(xAxisGen);

    // x轴 文字说明
    xAxis.append('text')
        .attr('id', 'date-title')
        .attr('x', dms.contentWidth + 60)
        .attr('y', 8)
        .style('fill', 'gray')
        .style('font-size', '12px')
        .style('letter-spacing', '5px')
        .text('确诊人数')


    // Y 轴
    const yAxisGen = d3.axisLeft()
        .scale(noScale);

    const yAxis = content.append('g')
        .attr('id', 'y-axis')
        .attr('transform', 'translate(0,0)');
    yAxis.call(yAxisGen);

    // Y轴 文字说明
    yAxis.append('text')
        .attr('id', 'date-title')
        .attr('x', 30)
        .attr('y', -20)
        .style('fill', 'gray')
        .style('font-size', '12px')
        .style('letter-spacing', '5px')
        .text('无症状人数')


    // 点图
    dotArea.selectAll('circle')
        .data(dataset)
        .join('circle')
        .attr('cx', d => yesScale(yesGet(d)))
        .attr('cy', d => noScale(noGet(d)))
        .attr('r', '5')
        .style('fill', 'lightskyblue')

    // 画斜线
    const line = content.append('g')
        .append('line')
        .attr('id', 'line')
        .attr('x1', 50)
        .attr('y1', dms.contentHeight - 10)
        .attr('x2', dms.contentWidth - 50)
        .attr('y2', 50)
        .style('stroke', 'lightskyblue')
        .style('stroke-width', '2px')
        .style('opacity', '0.3')

}
